<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card v-loading="loading" :bordered="false">
      <div class="applyBox">
        <div class="applyForm">
          <h4>代理中心设置</h4>
          <a-form-model
            ref="wechatForm"
            :rules="wechatRules"
            :model="wechatInfo"
            :labelCol="{ span: 6 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-form-model-item label="下级店铺别名" prop="lowerLevelShop">
              <a-input v-model="wechatInfo.lowerLevelShop" type="text" />
            </a-form-model-item>
            <a-form-model-item label="下级店铺图标" prop="lowerLevelShopIcon">
              <div class="upload-box">
                <div class="self-com">
                  <cyyUpdate
                    @uploadSuccess="successShop"
                    @deleteImg="wechatInfo.lowerLevelShopIcon = ''"
                    imgSizeText="100 * 100"
                    :imgSrc="wechatInfo.lowerLevelShopIcon"
                  >
                  </cyyUpdate>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="续费订单别名" prop="renewOrder">
              <a-input v-model="wechatInfo.renewOrder" type="text" />
            </a-form-model-item>
            <a-form-model-item label="续费订单图标" prop="renewOrderIcon">
              <div class="upload-box">
                <div class="self-com">
                  <cyyUpdate
                    @uploadSuccess="successReorder"
                    @deleteImg="wechatInfo.renewOrderIcon = ''"
                    imgSizeText="100 * 100"
                    :imgSrc="wechatInfo.renewOrderIcon"
                  >
                  </cyyUpdate>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="提现别名" prop="Withdrawal">
              <a-input v-model="wechatInfo.Withdrawal" type="text" />
            </a-form-model-item>
            <a-form-model-item label="提现图标" prop="WithdrawalIcon">
              <div class="upload-box">
                <div class="self-com">
                  <cyyUpdate 
                    @deleteImg="wechatInfo.WithdrawalIcon = ''"
                    @uploadSuccess="successWith" 
                    imgSizeText="100 * 100" 
                    :imgSrc="wechatInfo.WithdrawalIcon">
                  </cyyUpdate>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="佣金明细别名" prop="commissionDetail">
              <a-input v-model="wechatInfo.commissionDetail" type="text" />
            </a-form-model-item>
            <a-form-model-item label="佣金明细图标" prop="commissionDetailIcon">
              <div class="upload-box">
                <div class="self-com">
                  <cyyUpdate
                    @uploadSuccess="successComm"
                    @deleteImg="wechatInfo.commissionDetailIcon = ''"
                    imgSizeText="100 * 100"
                    :imgSrc="wechatInfo.commissionDetailIcon"
                  >
                  </cyyUpdate>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="提现记录别名" prop="WithdrawalLog">
              <a-input v-model="wechatInfo.WithdrawalLog" type="text" />
            </a-form-model-item>
            <a-form-model-item label="提现记录图标" prop="WithdrawalLogIcon">
              <div class="upload-box">
                <div class="self-com">
                  <cyyUpdate
                    @uploadSuccess="successWithLog"
                    @deleteImg="wechatInfo.WithdrawalLogIcon = ''"
                    imgSizeText="100 * 100"
                    :imgSrc="wechatInfo.WithdrawalLogIcon"
                  >
                  </cyyUpdate>
                </div>
              </div>
            </a-form-model-item>
            <a-form-model-item label="店铺订单别名" prop="shopOrder">
              <a-input v-model="wechatInfo.shopOrder" type="text" />
            </a-form-model-item>
            <a-form-model-item label="店铺订单图标" prop="shopOrderIcon">
              <cyyUpdate @uploadSuccess="successShopOrder" imgSizeText="100 * 100" :imgSrc="wechatInfo.shopOrderIcon">
              </cyyUpdate>
            </a-form-model-item>

            <a-form-model-item :wrapper-col="{ span: 12, offset: 2 }">
              <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <div class="previewBox">
          <h4>代理中心预览</h4>
          <div class="preview">
            <div class="list">
              <div class="item">
                <img :src="wechatInfo.lowerLevelShopIcon" alt="" />
                <span>{{ wechatInfo.lowerLevelShop || '下级店铺' }}</span>
              </div>
              <div class="item">
                <img :src="wechatInfo.renewOrderIcon" alt="" />
                <span>{{ wechatInfo.renewOrder || '续费订单' }}</span>
              </div>
              <div class="item">
                <img :src="wechatInfo.WithdrawalIcon" alt="" />
                <span>{{ wechatInfo.Withdrawal || '提现' }}</span>
              </div>
              <div class="item">
                <img :src="wechatInfo.commissionDetailIcon" alt="" />
                <span>{{ wechatInfo.commissionDetail || '佣金明细' }}</span>
              </div>
              <div class="item">
                <img :src="wechatInfo.WithdrawalLogIcon" alt="" />
                <span>{{ wechatInfo.WithdrawalLog || '提现记录' }}</span>
              </div>
              <div class="item">
                <img :src="wechatInfo.shopOrderIcon" alt="" />
                <span>{{ wechatInfo.shopOrder || '店铺订单' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { setAgencyConfig, getAgencyConfig } from '@/api/saas/setting'
import cyyUpdate from '@/components/CyyUi/UploadImg/index'
export default {
  name: 'SaasAgencyCommissionSetting',
  data() {
    return {
      loading: false,
      btnLoading: false,
      wechatInfo: {
        lowerLevelShop: '',
        lowerLevelShopIcon: '',
        renewOrder: '',
        renewOrderIcon: '',
        Withdrawal: '',
        WithdrawalIcon: '',
        commissionDetail: '',
        commissionDetailIcon: '',
        WithdrawalLog: '',
        WithdrawalLogIcon: '',
        shopOrder: '',
        shopOrderIcon: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
    }
  },
  components: {
    cyyUpdate,
  },
  created() {
    this.getData()
  },
  methods: {
    successShop(e) {
      this.wechatInfo.lowerLevelShopIcon = e.data
    },
    successReorder(e) {
      this.wechatInfo.renewOrderIcon = e.data
    },
    successWith(e) {
      this.wechatInfo.WithdrawalIcon = e.data
    },
    successComm(e) {
      this.wechatInfo.commissionDetailIcon = e.data
    },
    successWithLog(e) {
      this.wechatInfo.WithdrawalLogIcon = e.data
    },
    successShopOrder(e) {
      this.wechatInfo.shopOrderIcon = e.data
    },
    getData() {
      this.loading = true
      let that = this
      getAgencyConfig()
        .then((res) => {
          if (res.code === 0) {
            that.$nextTick(() => {
              that.wechatInfo = res.data
            })
          }
          console.log(that)
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.btnLoading = true
      setAgencyConfig(this.wechatInfo)
        .then((res) => {
          if (res.code == 0) {
            this.$message.success('保存成功！')
          } else {
            this.$message.warning(res.msg ? res.msg : '保存失败！')
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.btnLoading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.applyBox {
  display: flex;
  .applyForm {
    width: 550px;
  }
  .previewBox {
    margin-left: 40px;
  }
  .preview {
    width: 375px;
    height: 667px;
    border-radius: 8px;
    background-color: #f8f8f8;
    padding-top: 10px;
    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 10px;
      img {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
      }
    }
  }
}
</style>